<!-- 查询骑手分配订单 -->
<template>
    <div >
        <a-page-header
            style="border: 1px solid rgb(235, 237, 240);background:#fff"
            :title="`${storehouse}-${delivererUserName}-骑手订单信息`"
            @back="() => $router.go(-1)"
        >
        <div class='table-page-search-wrapper'>
            <a-form layout='inline'>
               <a-row :gutter='48'>
                    <a-col :md="8">
                        <a-form-item label="手机号">
                            <a-input v-model="phone" allow-clear placeholder="请输入手机号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8">
                        <a-form-item label="用户ID">
                            <a-input v-model="userId" allow-clear placeholder="请输入用户ID" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8">
                        <a-form-item label="订单号">
                            <a-input v-model="orderCode" allow-clear placeholder="请输入订单号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8">
                        <a-form-item label="店名">
                            <a-input v-model="shopName" allow-clear placeholder="请输入花店名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8">
                        <a-form-item label="是否加急">
                            <a-select v-model="isUrgent" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in isUrgentList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8">
                        <a-form-item label="加急类型">
                            <a-select v-model="urgentType" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in urgentTypeList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8">
                        <a-form-item label="状态">
                            <a-select v-model="orderStatus" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in orderStatusList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8">
                    </a-col>
                    <a-col :md='8' :sm='24'>
                        <a-form-item >
                            <a-button type='primary' @click="getData">查询</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>  
        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ pageSize: size, total: total ,showSizeChanger: true}" size="small">
            <!-- <div slot="goodsInfo" slot-scope="goodsInfo">
                <div style="display: flex;align-items: center;">
                    <img style="width: 40px;height: 40px" :src="JSON.parse(goodsInfo)[0].imageUrl" alt="">
                    <div>{{JSON.parse(goodsInfo)[0].goodsName}}-{{JSON.parse(goodsInfo)[0].spec}}-{{JSON.parse(goodsInfo)[0].colorName}}-{{JSON.parse(goodsInfo)[0].grade}}</div>
                </div>
            </div> -->
            <template slot="goodsInfo" slot-scope="text, record">
                <a-list item-layout="vertical" size="small" :pagination="false" :data-source="JSON.parse(record.goodsInfo)">
                    <a-list-item slot="renderItem" key="item.title" slot-scope="item">
                        <a-list-item-meta :description="item.specName +'-' + item.colorName +'-'+ item.grade">
                            <a slot="title" >{{ item.goodsName }}</a>
                            <a-avatar slot="avatar" :src="item.imageUrl" />
                        </a-list-item-meta>
                    </a-list-item>
                </a-list>
           </template>
            <div slot="userId" slot-scope="userId,record">
                <div>ID：{{userId}}</div>
                <div>手机号：{{record.phone}}</div>
                <div>店名：{{record.shopName}}</div>
            </div>
            <div slot="receivingAddressInfo" slot-scope="receivingAddressInfo">
                <div>{{JSON.parse(receivingAddressInfo).receiver}}  {{JSON.parse(receivingAddressInfo).receiverPhone}}</div>
                <div>{{JSON.parse(receivingAddressInfo).province}}-{{JSON.parse(receivingAddressInfo).city}}-{{JSON.parse(receivingAddressInfo).area}}</div>
            </div>
            <div slot="orderStatus" slot-scope="orderStatus">
                <div v-for="(item,i) in orderStatusList" :key="i">
                    <a-tag v-if="item.id == orderStatus" :color="colors[i%13]">{{item.name}}</a-tag>
                </div>
            </div>
            <div slot="isUrgent" slot-scope="isUrgent,record">
                <div v-if="isUrgent == '1'">
                    <div v-for="(item,i) in urgentTypeList" :key="i">
                        <a-tag v-if="item.id == record.urgentType" :color="colors[i%13]">{{item.name}}</a-tag>
                    </div>
                </div>
                <div v-else>-</div>
            </div>
            <template slot="sort" slot-scope="sort, record">
                <editable-cell :text="record.sort" @change="onCellChange(record.id, 'sort', $event)" />
            </template>
        </a-table>
        </a-page-header>
    </div>
</template>

<script>
import { columns } from './table';
import { queryGoodsRiderAllOrder , updateGoodsRiderOrderSort } from '@/api/newMall';

const EditableCell = {
    template: `
        <div class="editable-cell">
            <div v-if="editable" class="editable-cell-input-wrapper">
            <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
                type="check"
                class="editable-cell-icon-check"
                @click="check"
            />
            </div>
            <div v-else class="editable-cell-text-wrapper">
            {{ text || ' ' }}
            <a-icon type="edit" class="editable-cell-icon" @click="edit" />
            </div>
        </div>
        `,
    props: {
        text: Number,
    },
    data() {
        return {
        value: this.text,
        editable: false,
        };
    },
    methods: {
        handleChange(e) {
            const value = e.target.value;
            this.value = value;
        },
        check() {
            this.editable = false;
            this.$emit('change', this.value);
        },
        edit() {
            this.value  = this.text;
            this.editable = true;
        },
    },
};

export default {
    data () {
        return {
            brandId: this.global.brandId,
            storehouse: JSON.parse(localStorage.getItem('storehouseName')),
            delivererUserId: JSON.parse(localStorage.getItem('delivererUserId')),
            delivererUserName: JSON.parse(localStorage.getItem('delivererName')),
            phone: '',
            userId: '',
            orderCode: '', // 订单号
            shopName: '', // 花店名称
            isUrgent: undefined, // 是否加急
            isUrgentList: [
                {id: '0', name: '普通'},
                {id: '1', name: '加急'},
            ],
            urgentType: undefined, // 加急类型
            urgentTypeList: [
                {id: '0', name: '免费'},
                {id: '1', name: '付费'},
            ],
            orderStatus: undefined, // 订单状态
            orderStatusList: [
                {id: '1', name: '待发货'},
                {id: '2', name: '待收货'},
                {id: '3', name: '已完成'},
            ],
            page: 1,
            size: 10,
            total: 0,
            dataList: [],
            columns,
            colors: ['blue','purple','cyan','green','orange','red','pink','brown','indigo','lime','purple','teal','yellow','amber'],
            isload: false,
        };
    },
    components: {
        EditableCell,
    },
    created(){
        this.getData();
    },
    methods: {
        getData(){
            let _this = this
            const params = {
                'brandId': _this.brandId,
                'phone': _this.phone,
                'userId': _this.userId,
                'orderCode': _this.orderCode,
                'shopName': _this.shopName,
                'isUrgent': _this.isUrgent,
                'urgentType': _this.urgentType,
                'orderStatus': _this.orderStatus,
                'delivererUserId': _this.delivererUserId,
                'sort': 'sort',
                'size':_this.size,
                'page':_this.page - 1,
            }
            _this.isload = true
            queryGoodsRiderAllOrder(params)
            .then(res=>{
                _this.isload = false;
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements;
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 修改订单排序
        onCellChange(key, dataIndex, value) {
            const dataSource = [...this.dataList];
            const target = dataSource.find(item => item.id === key);
            let _this = this;
            console.log(key,dataIndex,value,'oncellchange')
            const params = {
                'sort': value,
                'orderCode': target.orderCode,
            }
            updateGoodsRiderOrderSort(params)
            .then(res => {
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: "修改成功",
                        duration: 8,
                    })
                    _this.getData();
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
    }
}

</script>
<style scoped>
</style>